//# sourceURL=http://uMapApp/Module/Road/StakeNumPanel
define([
    "mhjs/mhjs"
    , "uMap/uMap"
    , "uEarth/uEarth"
    , "../../UI/Panel/Panel"
    , "../StakeNum/Mileage"
], function (
    mhjs
    , uMap
    , uEarth
    , Panel
    , Mileage
) {

    function StakeNumPanel(option) {

        var _this = this;

        if (option) {
            if (option.startStakeNum) {
                _this._startStakeNum = new Mileage(option.startStakeNum);
                delete option.startStakeNum;
            }
            if (option.stopStakeNum) {
                _this._stopStakeNum = new Mileage(option.stopStakeNum);
                delete option.stopStakeNum;
            }
        }

        Panel.call(_this, option);
        _this.addClass("stakeNumPanel");

        _this._viewportStakeNum = new Mileage();

        _this.viewportListener = function () {
            if (_this.app.earth.getCameraViewport()) {
                var position = _this.app.earth.getCameraViewport().center;
                var viewportStakeNum = _this.app.modules.road.stakeNumModule.getPositionStakeNum(position);
                if (viewportStakeNum) {
                    _this.viewportStakeNum = viewportStakeNum.str;
                } else {
                    _this.viewportStakeNum = undefined;
                }
            } else {
                _this.viewportStakeNum = undefined;
            }
        };

        _this.on("update", function () {
            _this.app.earth.clock.onTick.addEventListener(_this.viewportListener);
            _this.off("update");
        });

        _this.on("close", function () {
            _this.app.earth.clock.onTick.removeEventListener(_this.viewportListener);
        });

        _this._currentStakeNum = new Mileage();

        if (_this.direction === undefined) {
            _this.direction = 0;
        } else {
            _this.direction = Number(_this.direction);
        }

        _this.ui = _this.ui || {};

        _this.ui.grid = new mhjs.Div({"class": "grid"});

        _this.ui.grid.on("mousemove", function (dom, event) {
            _this.updateCurrentStakeNum(event.offsetX);
        });

        _this.ui.grid.on("click", function (dom, event) {

            var target = _this.app.modules.road.roadLineModule.getSampledRoadCenterPositionHeading(_this._currentStakeNum.str);

            if (target) {
                _this.app.flyViewportKeep({
                    center: new uMap.Position(target.position).value,
                    hpr: {heading: target.heading + _this.direction}
                });
                _this.trigger("stakeNumSelect", _this._currentStakeNum.str);
            }
        });

        _this.ui.grid.rule = new mhjs.Div({"class": "rule"});

        _this.ui.grid.startNode = new mhjs.Div({"class": "node start"});
        _this.ui.grid.startNode.label = new mhjs.Div({"class": "label"});
        _this.ui.grid.startNode.point = new mhjs.Div({"class": "point"});
        _this.ui.grid.startNode.line = new mhjs.Div({"class": "line"});
        _this.ui.grid.startNode
            .append(_this.ui.grid.startNode.point)
            .append(_this.ui.grid.startNode.line)
            .append(_this.ui.grid.startNode.label)
        ;

        _this.ui.grid.stopNode = new mhjs.Div({"class": "node stop"});
        _this.ui.grid.stopNode.label = new mhjs.Div({"class": "label"});
        _this.ui.grid.stopNode.point = new mhjs.Div({"class": "point"});
        _this.ui.grid.stopNode.line = new mhjs.Div({"class": "line"});
        _this.ui.grid.stopNode
            .append(_this.ui.grid.stopNode.point)
            .append(_this.ui.grid.stopNode.line)
            .append(_this.ui.grid.stopNode.label)
        ;

        _this.ui.grid.currentNode = new mhjs.Div({"class": "node current"});
        _this.ui.grid.currentNode.label = new mhjs.Div({"class": "label"});
        _this.ui.grid.currentNode.point = new mhjs.Div({"class": "point"});
        _this.ui.grid.currentNode.line = new mhjs.Div({"class": "line"});
        _this.ui.grid.currentNode
            .append(_this.ui.grid.currentNode.point)
            .append(_this.ui.grid.currentNode.line)
            .append(_this.ui.grid.currentNode.label)
        ;

        _this.ui.grid.viewportNode = new mhjs.Div({"class": "node viewport"});
        _this.ui.grid.viewportNode.label = new mhjs.Div({"class": "label"});
        _this.ui.grid.viewportNode.point = new mhjs.Div({"class": "point"});
        _this.ui.grid.viewportNode.line = new mhjs.Div({"class": "line"});
        _this.ui.grid.viewportNode
            .append(_this.ui.grid.viewportNode.point)
            .append(_this.ui.grid.viewportNode.line)
            .append(_this.ui.grid.viewportNode.label)
        ;

        _this.ui.grid.stakeNumPeriodData = new mhjs.Div({"class": "stakeNumPeriodData"});
        _this.ui.grid.stakeNumPointData = new mhjs.Div({"class": "stakeNumPointData"});

        _this.ui.grid
            .append(_this.ui.grid.stakeNumPeriodData)
            .append(_this.ui.grid.stakeNumPointData)
            .append(_this.ui.grid.rule)
            .append(_this.ui.grid.startNode)
            .append(_this.ui.grid.stopNode)
            .append(_this.ui.grid.currentNode)
            .append(_this.ui.grid.viewportNode)
        ;

        _this
            .append(_this.ui.grid);


    }

    var _class = StakeNumPanel;
    mhjs.Inherit(_class, Panel);

    Object.defineProperties(_class.prototype, {
        "startStakeNum": {
            set: function (startStakeNum) {
                var _this = this;
                _this._startStakeNum = new Mileage(startStakeNum);
                _this.update();
            },
            get: function () {
                return this._startStakeNum;
            }
        },
        "stopStakeNum": {
            set: function (stopStakeNum) {
                var _this = this;
                _this._stopStakeNum = new Mileage(stopStakeNum);
                _this.update();
            },
            get: function () {
                return this._stopStakeNum;
            }
        },
        "viewportStakeNum": {
            set: function (stakeNum) {
                var _this = this;

                if (stakeNum) {
                    _this._viewportStakeNum = new Mileage(stakeNum);
                    _this.updateViewportStakeNum();
                } else {
                    _this.ui.grid.viewportNode.hide();
                }
            },
            get: function () {
                return this._viewportStakeNum;
            }
        },
        "update": {
            value: function () {

                var _this = this;
                if (_this._startStakeNum && _this._stopStakeNum) {
                    _this.ui.grid.startNode.label.text(_this._startStakeNum.str);
                    _this.ui.grid.stopNode.label.text(_this._stopStakeNum.str);

                    _this.ui.grid.rule.empty();

                    var count = _this._stopStakeNum.no - _this._startStakeNum.no;
                    var size = _this.ui.grid.width() / count;

                    for (var i = _this._stopStakeNum.no; i > _this._startStakeNum.no; i--) {
                        var ruleNode = new mhjs.Div({"class": "ruleNode"});
                        _this.ui.grid.rule.append(ruleNode);
                    }
                    _this.trigger("update");

                }
            }
        },
        "updateCurrentStakeNum": {
            value: function (delta) {
                var _this = this;
                _this._currentStakeNum.distance = _this._stopStakeNum.distance - (_this._stopStakeNum.distance - _this._startStakeNum.distance) / _this.ui.grid.width() * delta;
                _this.ui.grid.currentNode.css({"left": delta / _this.ui.grid.width() * 100 + "%"});
                _this.ui.grid.currentNode.label.text(_this._currentStakeNum.str);
            }
        },
        "updateViewportStakeNum": {
            value: function () {
                var _this = this;
                var distancePercent = (_this._stopStakeNum.distance - _this._viewportStakeNum.distance) / (_this._stopStakeNum.distance - _this._startStakeNum.distance) * 100;
                if (distancePercent >= 0 && distancePercent <= 100) {
                    _this.ui.grid.viewportNode.show();
                    _this.ui.grid.viewportNode.css({"left": distancePercent + "%"});
                    _this.ui.grid.viewportNode.label.text(_this._viewportStakeNum.str);
                } else {
                    _this.ui.grid.viewportNode.hide();
                }

            }
        },
        "addStakeNumDataPeriodLine": {
            value: function () {

                var _this = this;

                if (_this._startStakeNum && _this._stopStakeNum) {

                    var line = new mhjs.Div({"class": "line"});
                    var count = _this._stopStakeNum.no - _this._startStakeNum.no;
                    var size = _this.ui.grid.width() / count;

                    for (var i = _this._stopStakeNum.no; i > _this._startStakeNum.no; i--) {
                        var node = new mhjs.Div({"class": "lineNode"});
                        line.append(node);
                        line[i - 1] = node;
                    }

                    _this.ui.grid.stakeNumPeriodData.append(line);
                    return line;

                }
            }
        },
        "resetStakeNumDataLine": {
            value: function (line) {
                var _this = this;
                line.find(".lineNode").removeAttr("style");
            }
        },
        "addStakeNumPointData": {
            value: function (stakeNum, color) {

                var _this = this;

                if (_this._startStakeNum && _this._stopStakeNum) {

                    stakeNum = new Mileage(stakeNum);
                    var distancePercent = (_this._stopStakeNum.distance - stakeNum.distance) / (_this._stopStakeNum.distance - _this._startStakeNum.distance) * 100;

                    if (distancePercent >= 0 && distancePercent <= 100) {

                        var node = new mhjs.Div({"class": "pointNode"});

                        node.css({
                            "left": distancePercent + "%",
                            "background-color": color
                        });
                        _this.ui.grid.stakeNumPointData.append(node);

                        return node;

                    }

                }
            }
        },
        "clearStakeNumPointData": {
            value: function () {
                this.ui.grid.stakeNumPointData.empty();
            }
        }
    });

    return _class;

});